<template>
  <div>
    <div class="top-box">
      <router-link to="/hotTopic">
        <div class="box">
          <img :src="imgUrl1" alt="">
          <p>最火话题</p>
        </div>
      </router-link>
      <router-link to="/beautifulPerson">
        <div class="box">
          <img :src="imgUrl2" alt="">
          <p>最美达人</p>
        </div>
      </router-link>
      <router-link to="/hotProduct">
        <div class="box">
          <img :src="imgUrl3" alt="">
          <p>最热商品</p>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name:"TitleList",
  data(){
    return{
      imgUrl1:require("../../assets/find/find_01.png"),
      imgUrl2:require("../../assets/find/find_02.png"),
      imgUrl3:require("../../assets/find/find_03.png"),
    }
  }
}
</script>

<style scoped>
.top-box{
  width: 9.466rem;
  height: 4.53rem;
  background-color: #ffffff;
  margin-left: 0.267rem;
  box-shadow: 0.053rem -0.267rem 1.067rem rgba(0,0,0,0.2);
  border-radius: 0.134rem;
  z-index: 5.333;
}
.box{
   width: 29.5%;
   margin-left: 0.267rem;
   margin-top: 0.267rem;
   float: left;
}
.box img{
  width: 100%;
  height: 100%;
  
}
.box p{
  color: #ff4070;
  font-size: 0.4rem;
  width: 100%;
  margin-top: 0.1rem;
  text-align: center;
}
</style>
